<template>
  <!-- 子页面 排量统计 -->
  <view class="conter">
    <cc-dateA title='排量统计' text='筛选日期' color='#fff' frist="日" second="月" third="年" fourth="自定义" @confirm="confirm_a"></cc-dateA>
    <view class="navigation_head"></view>
      <view class="head">
        <view class="head_word">
         <ms-dropdown-menu>
            <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
          </ms-dropdown-menu>
        </view> 
      </view>
    <view class="box">
      <view class="box_a">
        总排放量
      </view>
      <view class="box_b">
        {{total}}kg
      </view>
    </view>
      <view class="card">
        		<view class="card_a">
        		 排量详情
        		</view>
        	<view class="region">
        	  <scroll-view scroll-x="true" >
        	    <view  class="scroll"> 
        	      <echarts :option="option" style="height: 600rpx;width: 3000rpx;" @click="echartsClick"></echarts>
        	    </view>
        	  </scroll-view>
        	</view>
      </view>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
		data() {
			return {
        value:0,
        All_enterpriseList:[],
				enterprise_id:'',
        date:'',
        choice:'',
        total:'0',
        option: {
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            name: '排量',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        }
			}
		},
		onLoad() {
		this.getAll_enterprise()
    
		},
    
		methods: {
      // 查询企业的总数和企业检测详情
      getAll_enterprise(){
      	this.$http.get('/device/group/customerId',{}).then(res=>{
          // console.log('res', res)
          if(res.code=='00000'){
            const list = []
            res.data.forEach((item,index)=>{
              list.push(
               { 
                text:item.abbreviation,
                id:item.id,
                value:index
                }
              )
            })
            // console.log('list', list)
            this.All_enterpriseList = list
          }
      	})
      },  
      getStatistics(){
        this.$http.get('/envirnment-air/app/analysis/outletValue/outletCount',{
          date:this.date,
          dateType:this.choice,
          enterpriseId:this.enterprise_id
        }).then(res=>{
          console.log(res);
          let List = []
          const timeList = [] 
          let valueList = [] 
         // 柱状图
          res.data.counts.forEach((item,index)=>{
            timeList.push(item.key)
            valueList.push(item.value)
            
          }) 
          // console.log('this.allValue',this.allValue)
          this.option.xAxis.data = timeList 
          this.option.series[0].data = valueList
          this.getAllvalue(valueList)
          this.$refs.update(this.option1)
        })
      },
      getAllvalue(arr){
        // console.log('总量',arr)
        let s = 0
        arr.forEach((item,index,arr)=>{
          s+=item
        }) 
        this.total = s
        // console.log('总数量', this.total)
      },
      mileage(e) {
        this.enterprise_id = e.id
        this.getStatistics()
        // console.log('enterprise_id',this.enterprise_id);
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.date = e.date
        this.choice = e.choice
        // console.log('fjowefjie',this.date ,this.choice)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
		}
	}
</script>

<style lang="scss">
  .conter {
    height:100vh;
    background: #F7F7F7;
    overflow: hidden;
  }
  .uni-datetime-picker-timebox[data-v-6e13d7e2] {
    border: none !important;
  }
  .navigation_head{
    height: calc(88rpx + var(--status-bar-height));
  }
  .head {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }

  .box {
    width: 702rpx;
    height: 298rpx;
    margin: 0 auto;
    background: url(../../static/bg_slices/bg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }

  .box_a {
    text-align: center;
    margin-top: 84rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .box_b {
    text-align: center;
    font-size: 58rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #FFFFFF;
  }

  .card {
    width: 702rpx;
    margin: 20rpx auto;
    height: 620rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .card_a {
    margin: 20rpx 0 0 24rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .region{
    width: 100%;
    scroll-view{
      width: 100%;
    }
  }
  .scroll{
    width: 100%;
    transform: translate(-35%,-1%);
  }
</style>
